import React from 'react';
import Taro from '@tarojs/taro';
import {AtModal, AtModalAction, AtModalContent, AtModalHeader} from "taro-ui";
import {Image, View} from "@tarojs/components";
import './liveCode.scss'
import {TARO_ENV} from "../../constants/api";

const LiveCode: React.FC<{ modalShow: boolean;qrImg: any; contactPhone?: any; title: string; subTitle: string; onClose: Function;secondSubTitle?: string  }> = (props) => {

  const handlerOnClose = ()=>{
    props.onClose()
  }
  const showImg = ()=> {
    if (TARO_ENV !== 'h5') {
      Taro.previewImage({
        current: props.qrImg, // 当前显示图片的http链接
        urls:[props.qrImg]// 需要预览的图片http链接列表
      })
    }
  }

  return (
    <AtModal className='modal_concatWx' isOpened={props.modalShow} onClose={handlerOnClose}>
        <AtModalHeader>{props.title}</AtModalHeader>
        <AtModalContent>
          {!!props.qrImg && props.qrImg !== 'variable_code_close' && <Image
            mode='aspectFill'
            style='width: 120px;height: 120px;'
            src={props.qrImg}
            onClick={showImg.bind(this)}
          />}
          {(!props.qrImg || props.qrImg === 'variable_code_close') && props.contactPhone && <View>{ props.contactPhone || '' }</View>}
          {!!props.qrImg && TARO_ENV === 'h5' && <View className='longPress'>长按识别二维码</View>}
        </AtModalContent>
        <AtModalAction>
          {props.subTitle && <View className='modal_txt' style={`${TARO_ENV === 'h5' ? '' : 'padding-bottom: 8px !important;'}`}>{props.subTitle}</View>}
          {props.secondSubTitle && <View className='modal_txt'>{props.secondSubTitle}</View>}
          <View style='height: 30px;' />
        </AtModalAction>
      </AtModal>
  )
}

export default LiveCode
